<template>
	<view style="padding-bottom: 130rpx;">

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>车辆违章</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view>
				<view class="searchBox">
					<view style="display: flex;" @click="showStatus=!showStatus">
						<text class="city">{{currentStatus.statusStr}}</text>
						<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
					</view>

					<view class="search">
						<u--input v-model="keyword" clearable border="none" fontSize="12"
							placeholder="输入车牌号查询" @blur="isSearch = false" @focus="isSearch = true"
							@change="searchChange" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>
				</view>

				<view id="mescroll" class="noticeBox flex-row-center">
					<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" src="/static/other/notice.png"
						mode="aspectFill"></image>
					<text v-if="statistics.inQuery">违章结果查询中</text>
					<text v-else>最近查询结果:{{statistics.lastTime}} {{statistics.lastTotal}}条</text>
				</view>



			</view>
		</u-sticky>

		<mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="btnClick(3,item)">

				<image v-if="item.processingStatus == 1" class="statusImg"
					src="https://qykh.shopec.com.cn/image-server/dz/undeal.png" mode=""></image>
				<image v-else class="statusImg" src="https://qykh.shopec.com.cn/image-server/dz/dealed.png" mode=""></image>
				<view class="text-line">
					<text class="text-name">车牌号:</text>
					<text class="text-value">{{item.carNo|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">违章时间:</text>
					<text class="text-value">{{item.illegalTime|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">违章地点:</text>
					<text class="text-value">{{item.illegalLocation|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">违章类型:</text>
					<text class="text-value">{{item.illegalType|illegalType}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">违章扣分:</text>
					<text class="text-value">{{item.pointsDeduction||0}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">罚款金额:</text>
					<text class="text-value">{{item.illegalFines||0}}</text>
				</view>

				<u-line color="#efefef" margin="20rpx 0"></u-line>
				<view class="flex-row-end">
					<view class="btn-detail" @click.stop="btnClick(1,item)">
						编辑
					</view>
					<view class="btn-detail" @click.stop="btnClick(2,item)">
						删除
					</view>

				</view>

			</view>
		</mescroll-body>

		<view class="bottomView flex-row-center-sb">
			<view class="btn" style="border: 1rpx solid #1673ff;color: #1673ff;background-color: #fff;"
				@click="btnClick(4)">添加违章</view>
			<view class="btn" @click="btnClick(5)">违章查询</view>
		</view>

		<view v-if="showStatus" class="filterPop" :style="[{top:popTop}]">
			<view class="filterContent">
				<text class="filterItem" :class="{active : currentStatus.code===item.code}"
					v-for="(item, index) in status" :key="index"
					@click.stop="changeStatus(item)">{{item.statusStr}}</text>
			</view>
		</view>


	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as illegalApi from '@/api/illegal-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				showStatus: false,
				keyword: '',
				popTop: '',
				currentStatus: {
					statusStr: '全部',
					code: 0
				},
				status: [{
						statusStr: '全部',
						code: 0
					},
					{
						statusStr: '未处理',
						code: 1
					},
					{
						statusStr: '已处理',
						code: 2
					},
					{
						statusStr: '超15天未处理',
						code: 3
					},
					{
						statusStr: '超30天未处理',
						code: 4
					}
				],

				list: [],
				statistics: {},

			};
		},
		onReady() {
			//监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery();
			query.select('#mescroll').boundingClientRect();
			query.exec((res) => {
				this.popTop = res[0].top -10 + 'px'
			
			})
		},
		onLoad(op) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			this.currentStatus = this.status[op.type];
			this.illegalStatistics();
			uni.$on('refreshIllegalList',()=>{
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			// 获取违章查询状态及查询时间
			illegalStatistics() {
				illegalApi.illegalStatistics().then(res => {
					this.statistics = res.data;
				})
			},

			upCallback(page) {

				var params = {
					carNo: this.keyword,
					type: this.currentStatus.code,
					pageNum: page.num,
					pageSize: page.size,
				}
				illegalApi.illegalList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			changeStatus(item) {
				this.currentStatus = item;
				this.showStatus = !this.showStatus;
				this.mescroll.triggerDownScroll();
			},
			// 编辑|删除|详情
			btnClick(type, item) {
				switch (type) {
					case 1: //编辑
						uni.navigateTo({
							url: './add?type=1' + '&illegalId=' + item.id
						})
						break;
					case 2: //删除
						this.deleteIllegal(item.id);
						break;
					case 3: //详情
						uni.navigateTo({
							url: './detail?illegalId=' + item.id
						})
						break;
					case 4: //添加违章
						uni.navigateTo({
							url: './add?type=0'
						})
						break;
					case 5: //违章查询
						uni.navigateTo({
							url: './query'
						})
						break;
					default:
						break;
				}
			},
			deleteIllegal(illegalId) {
				uni.showModal({
					title: '提示',
					content: '确认删除违章信息吗?',
					cancelText: '取消',
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							illegalApi.deleteIllegal(illegalId).then(res1 => {
								if (res1.code == 200) {
									this.mescroll.triggerDownScroll();
								}
							})
						}
					}
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 70upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 35rpx;
		}
	}

	.noticeBox {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		padding: 22rpx;
		color: #666666;
		font-size: 24rpx;
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
		position: relative;

		.statusImg {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}
    
	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 44rpx;
	    background-color: #FFFFFF;
		.btn {
			height: 88rpx;
			width: 312rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background-color: #1673FF;
			font-size: 32rpx;
			color: #fff;
		}
	}
	
	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;

		.filterContent {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			background-color: #ffffff;
			padding: 20rpx 44rpx 28rpx;

			.filterItem {
				margin-top: 30rpx;
				margin-right: 20rpx;
				width: 200rpx;
				line-height: 52rpx;
				text-align: center;
				background: #EFEFEF;
				border-radius: 6rpx;
				color: #666666;
				font-size: 28rpx;

				&.active {
					background: #1673FF;
					color: #ffffff;
				}
			}
		}
	}
</style>
